<template>
  <div id="app">
    <el-dialog :visible.sync="dialogVisible" title="消息列表" center top="10px">
      <div style="margin-bottom: 15px">
        <el-radio v-model="radio" label="1">群发消息</el-radio>
        <el-radio v-model="radio" label="2" @input="getSimpleList">定向消息</el-radio>
      </div>
      <div v-if="radio==1">
        <el-table :data="systemList" border stripe :cell-style="{ 'textAlign': 'center' }"
                  :header-cell-style="{ 'background-color': '#303e9d', 'color': 'white', 'textAlign': 'center' }"
                  max-height="700px">
          <el-table-column prop="id" label="ID" width="60px"></el-table-column>
          <el-table-column prop="createTime" label="日期" width="200px"></el-table-column>
          <el-table-column prop="title" label="正标题" width="150px"></el-table-column>
          <el-table-column prop="subTitle" label="副标题" width="100px"></el-table-column>
          <el-table-column label="缩略图" width="100px">
            <template slot-scope="scope">
              <el-image v-if="scope.row.coverPicture" style="width: 50px; height: 50px"
                        :src="'https://'+scope.row.coverPicture"
                        :preview-src-list="['https://'+scope.row.coverPicture]">
              </el-image>
            </template>
          </el-table-column>
          <el-table-column label="内容">
            <template slot-scope="scope">
                <div v-html="scope.row.content" slot="reference" class="htmlContent"></div>
            </template>
          </el-table-column>
        </el-table>
        <!--        <div v-for="(item,index) in systemList" style="border-bottom: 1px solid #66a8cc">-->
        <!--          <p>序号：{{ index + 1 }}</p>-->
        <!--          <p>日期：{{ item.createTime }}</p>-->
        <!--          <div v-html="item.content" class="htmlContent"></div>-->


        <!--        </div>-->


      </div>
      <div v-if="radio==2">
        <el-table :data="singleList" border stripe :cell-style="{ 'textAlign': 'center' }"
                  :header-cell-style="{ 'background-color': '#303e9d', 'color': 'white', 'textAlign': 'center' }"
                  max-height="700px">
          <el-table-column prop="id" label="ID" width="60px"></el-table-column>
          <el-table-column prop="createTime" label="日期" width="200px"></el-table-column>
          <el-table-column prop="receiveUserName" label="接收人" width="100px"></el-table-column>
          <el-table-column prop="title" label="正标题" width="150px"></el-table-column>
          <el-table-column prop="subTitle" label="副标题" width="100px"></el-table-column>
          <el-table-column label="缩略图" width="100px">
            <template slot-scope="scope">
              <el-image v-if="scope.row.coverPicture" style="width: 50px; height: 50px"
                        :src="'https://'+scope.row.coverPicture"
                        :preview-src-list="['https://'+scope.row.coverPicture]">
              </el-image>
            </template>
          </el-table-column>
          <el-table-column label="内容">
            <template slot-scope="scope">
              <div v-html="scope.row.content" slot="reference" class="htmlContent"></div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-dialog>


  </div>
</template>

<script>
export default {
  name: "getEmailList",
  data() {
    return {
      dialogVisible: false,
      radio: "1",
      systemList: [],
      singleList: [],
    }
  },
  methods: {
    handleOpen() {
      this.dialogVisible = true
      this.radio = '1'
      this.$api.messageGetSystemMessageList({pageSize: 10000, pageNumber: 1}).then(res => {
        this.systemList = res.data
      })
    },
    getSimpleList() {
      this.$api.messageGetMessageList({pageSize: 10000, pageNumber: 1}).then(res => {
        this.singleList = res.data
      })
    }
  }
}
</script>

<style scoped>
::v-deep img {
  width: 50% !important;
  height: 50% !important;
}

::v-deep .emailContent {
  width: 50% !important;
  height: 50% !important;
}

</style>